<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
</head>

<body>
    <div id="demo">
        <button v-on:click="counter++">Click Me</button>
        <div>look you click times : {{counter}}</div>
    </div>

    <div id="demo2">
        <button v-on:click="clickEvent">Click Me on alter</button>
        <div></div>
    </div>

    <div id="demo3">
        <button v-on:click="clickEvent">Click Me</button>
    </div>

    <!-- 内联处理器中的方法
        除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法： -->
    <div id="demo4">
        <button v-on:click="say('hi')">say hi</button>
        <button v-on:click="say('hello')">say hello</button>
        <button v-on:click="say('good bye')">say good bye</button>
    </div>

    <div id="demo5">
        <button v-on:click="warn('输出一段话',$event)">Clike Me</button>
    </div>
    <div id="demo6">
        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis">tag A</a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit">tag Form</form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat">tag A</a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent>tag form</form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>
    </div>

    <script>
        new Vue({
            el: demo,
            data: {
                counter: 1
            }
        })

        new Vue({
            el: "#demo2",
            data: {
                counter: 1
            },
            methods: {
                clickEvent: function() {
                    alert(this.counter)
                    return this.counter++;
                }
            }
        })

        let vm = new Vue({
            el: demo3,
            data: {
                name: "Vue.js"
            },
            methods: {
                clickEvent: function(event) {
                    alert('hello' + this.name + '!');
                    event ? alert(event.target.tagName) : ''
                },
                clickEvent2: function(event) {
                    console.log("hello,直接触发了!!")
                }
            }
        })
        vm.clickEvent2();

        new Vue({
            el: demo4,
            methods: {
                say: function(message) {
                    console.log("say " + message)
                }
            }
        });
        /*
        在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
        尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

        为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。
        之前提过，修饰符是由点开头的指令后缀来表示的。

            .stop
            .prevent
            .capture
            .self
            .once
            .passive
        */
        new Vue({
            el: demo5,
            methods: {
                warn: function(message, event) {
                    if (event) event.preventDefault();
                    console.log(message)
                }
            }
        })

        new Vue({
            el: "#demo6"
        })
    </script>
</body>

</html>